<template>
  <up-popup :show="dialogVisible" mode="center" round="8" @close="handleClosePopup">
    <view class="popupContain">
      <view class="loginBtn" @click="handleLogin">微信一键登录</view>
      <view class="protocolLine">
        <up-checkbox :customStyle="{ marginBottom: '8px' }" name="agree" usedAlone v-model:checked="isProtocol">
        </up-checkbox>
        阅读并同意<text class="text">《隐私协议》</text>
      </view>
      <view class="cancelBtn" @click="handleClosePopup">取消登录</view>
    </view>
  </up-popup>
</template>

<script setup>
import { ref, getCurrentInstance, toRefs, computed } from 'vue';

const { proxy } = getCurrentInstance();
// 同意协议
const isProtocol = ref(false);
const props = defineProps({
  // 聊天框
  loginPopupShow: {
    type: Boolean,
    default: false
  }
})
const { loginPopupShow } = toRefs(props);
const emit = defineEmits(['update:loginPopupShow']);

// 使用计算属性建立双向绑定
const dialogVisible = computed({
  get: () => loginPopupShow.value,
  set: (val) => emit('update:loginPopupShow', val)
});

// 登录系统
const handleLogin = () => {
  proxy.$util.wxLogin();
  // 关闭弹窗
  handleClosePopup();
}

// 关闭模态框
const handleClosePopup = () => {
  emit('update:loginPopupShow', false);
}
</script>

<style lang='scss' scoped>
.popupContain {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 24rpx 24rpx 0;

  .loginBtn {
    color: #FFF;
    padding: 12rpx 20rpx;
    border-radius: 16rpx;
    display: inline-block;
    background-color: #0D6FFF;
  }

  // 协议
  .protocolLine {
    display: flex;
    padding: 24rpx 0;
    align-items: center;
    justify-content: center;

    .up-checkbox {
      margin-right: 16rpx;
    }

    .text {
      color: #0D6FFF;
    }
  }

  // 取消登录
  .cancelBtn {
    font-size: 24rpx;
    text-align: center;
    color: rgba(#000, 0.45);
  }
}
</style>